<template>
    <div>
        <table class="table table-border">
            <tbody>
                <tr>
                    <td>门店名称</td>
                    <td><input type="text" v-model="data.dname"></td>
                </tr>
                 <tr>
                    <td>分店名称</td>
                    <td><input type="text" v-model="data.fen"></td>
                </tr>
                 <tr>
                    <td>商户地址</td>
                    <td><select v-model="data.cid">
                        <option value="">请选择</option>
                        <option :value="o.cid" v-for="o in lie" :key="o.cid">{{o.cname}}</option>
                    </select></td>
                </tr>
                 <tr>
                    <td>门店图片</td>
                    <td><input type="file" @change="img">
                    <img v-show="isImgShow" :src="data.tu" width="100px" height="100px"></td>
                </tr>
                 <tr>
                    <td>客服电话</td>
                    <td><input type="text" v-model="data.phone"></td>
                </tr>
                 <tr>
                    <td>门店状态</td>
                    <td><input type="radio" :value="1" v-model="data.flag">启用
                    <input type="radio" :value="0" v-model="data.flag">停用</td>
                </tr>
                 <tr>
                    <td>门店介绍</td>
                    <td><textarea v-model="data.jie"></textarea></td>
                </tr>
                 <tr>
                    <td>入住须知</td>
                    <td><textarea v-model="data.xu"></textarea></td>
                </tr>
                 <tr>
                    <td>交通信息</td>
                    <td><textarea v-model="data.jiao"></textarea></td>
                </tr>
                 <tr>
                    <td></td>
                    <td><input type="button" value="保存" @click="add()"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'
import moment from 'moment';
import axios from 'axios';
import {useRoute,useRouter} from 'vue-router'
const route = useRoute()
const router = useRouter()
let data:any = ref({
 "dname": '',
  "fen": '',
  "cid": '',
  "tu": "",
  "phone": "",
  "flag": 1,
  "jie": "",
  "xu": "",
  "jiao": ""
})
let isImgShow : any = ref(false)
let lie:any = ref([
 
])
onMounted(()=>{
show()
})
const img=(a:any)=>{
    let p = a.target.files[0]
    let s = new FormData()
    s.append("file",p)
    axios({
        url:'https://localhost:7046/api/Dian/Tu',
        method:'post',
        data:s
    })
    .then(res=>{
        data.value.tu = res.data
        isImgShow.value = true
    })
}
const show=()=>{
    axios({
        url:'https://localhost:7046/api/Dian/Chengs',
        method:'get'
    })
    .then(res=>{
        lie.value = res.data
    })
}
const add=()=>{
    if(data.value.dname=="")
    {
        alert('门店名称不能为空')
            return;
    }
    if(data.value.phone=="")
    {
        alert('手机号不能为空')
            return;
    }
    let ps = /^1[3-9]\d{9}$/
    if(!ps.test(data.value.phone))
    {
        alert('手机号不合法')
            return;
    }
    axios({
        url:'https://localhost:7046/api/Dian/Add',
        method:'post',
        data:data.value
    })
    .then(res=>{
        if(res.data==-1)
        {
            alert('手机号重复')
            return;
        }
        if(res.data>0)
        {
             alert('新增成功')
            
        }
        else
        {
            alert('新增失败')
            return;
        }
    })
}
</script>

<style scoped>

</style>